<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue 11</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input v-model="msg" type="text" placeholder="edit me">
        <div>input: {{msg}}</div>
        <textarea v-model="msg2" name="note" id="" cols="30" rows="10" placeholder="add a line"></textarea>
        <p style="white-space: pre-line;">{{msg2}} </p>
        <br>
        <div style="margin-top:20px">
            <input type="checkbox" id="服务器1" value="服务器1" v-model="servers"><label for="服务器1">服务器1</label>
            <input type="checkbox" id="服务器2" value="服务器2" v-model="servers"><label for="服务器2">服务器2</label>
            <br>
            <span>servers: {{servers}}</span>
        </div>

        <div style="margin-top: 20px;">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for=one>One</label>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for=two>Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>
        <button type="submit" @click="submit('ab',$event)">提交</button>
    </div>
    <script text="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                msg: "I am coming!",
                msg2: "",
                servers: [],
                picked: "",
            },
            methods: {
                submit(arg, e) {
                    console.log(e);
                    opt = {
                        msg: this.msg,
                        text: this.msg2,
                        svs: this.servers,
                    };
                    console.log(opt);
                },
            },
        });
    </script>
</body>